<table cellpadding="0" cellspacing="0" class="entry_attribute">
    <tr>
        <td class="entry_attributes_sub_header" colspan="2"><i class="fa fa-fw fa-share-alt"></i> Share</td>
    </tr>
    <tr>
        <td>
            <table width="100%">
                <tr>
                    <td ng-repeat="pane in panes">
                        <div ng-click="activateTab(pane)"
                             ng-class="{permission_tab_active:pane.selected, permission_tab_inactive:!pane.selected}">
                            {{pane.title}}
                            <span style="float: right">
                                <div ng-show="pane.selected" class="edit_icon font-12em">
                                    <i ng-click="showAddPermissionOptionsClick()" class="fa fa-plus-circle"></i></div>
                                <div ng-hide="pane.selected" class="edit_icon font-12em">{{pane.count || 0}}</div>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border-left: 1px solid #e1e1e1">
                        <div class="tab-pane" ng-show="selected"></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td>
            <!--user select filter-->
            <div ng-show="showPermissionInput">
                <input type="text" placeholder="Enter name or email" ng-model="userFilterInput" ng-change="filter()"
                       style="width: 180px; font-size: 0.80em">

                <div style="overflow: auto; height: 80px;" class="font-75em">

                    <div ng-if="!filtering && !accessPermissions" style="opacity: 0.7; padding: 3px 0 3px 0">
                        <i>No matches found</i>
                    </div>

                    <div ng-repeat="permission in accessPermissions | orderBy:'display'">
                       <span ng-click="addRemovePermission(permission)" class="cursor_pointer">
                        <i class="fa opacity_hover"
                           ng-class="{'fa-square-o':!permission.selected, 'fa-check-square-o':permission.selected}"></i>
                        <i class="fa fa-group permission_group" ng-if="permission.article==='GROUP'"></i> {{permission.display}}
                           <i class="fa fa-user permission_user" ng-if="permission.article!='GROUP'"></i>
                           {{permission.firstName}} {{permission.lastName}}
                        </span>
                    </div>
                </div>

                <div style="border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; background-color: #f7f7f7; height: 24px">
                    <!--<strong class="font-75em opacity_hover"><i class="fa fa-square-o"></i> Remote </strong>-->
                    <button type="button" class="btn btn-xs btn-default pull-right"
                            ng-click="closePermissionOptions()">Close
                    </button>
                </div>
            </div>
            <!--<div ng-if="activePermissions.length==0" class="permission_user">No permissions</div>-->

            <div width="160px" class="permission_list" ng-repeat="permission in activePermissions | orderBy:'display'">
                &nbsp;
                <span ng-if="permission.article=='GROUP'"><i class="fa fa-group permission_group"></i> {{permission.display}}</span>
                <span ng-if="permission.article=='ACCOUNT'"><i class="fa fa-user permission_user"></i> <a
                        ng-href="profile/{{permission.articleId}}">{{permission.display}}</a></span>
                <i ng-if="permission.canEdit" ng-click="deletePermission($index, permission)" style="padding-top: 3px"
                   class="fa fa-times pull-right delete_icon"></i>
            </div>
            <div ng-if="activePermissions.length == 0">&nbsp;</div>

        </td>
    </tr>
    <tr ng-if="canSetPublicPermission">
        <td class="permission_footer" ng-if="!entry.publicRead">
            <div class="permission_footer_link" ng-click="enablePublicRead(entry)"><i class="fa fa-globe"></i> Enable
                Public Read Access
            </div>
        </td>

        <td class="permission_footer" ng-if="entry.publicRead" style="border-left: 0; background-color: #f9f9f9">
            <div class="permission_footer_link" ng-click="disablePublicRead(entry)">
                <i class="fa fa-globe blue"></i> Disable Public Read Access
            </div>
        </td>
    </tr>
</table>
